<template>
  <PublicEmpty v-if="taskList0.total_record == 0" :ishowImage="true" />
  <div v-else class="dt-content-project-list">
    <el-table
      :data="taskList0.items"
      border
      style="width: 100%"
      :header-cell-style="headerRowStyle"
      :row-class-name="tableRowClassName"
      @row-click="showTaskCard"
    >
      <el-table-column prop="taskNo" label="编号" width="80"> </el-table-column>
      <el-table-column prop="majorName" label="所属专业" min-width="200">
        <template slot-scope="scope">
          <el-tooltip
            :open-delay="500"
            class="item"
            effect="dark"
            :content="scope.row.majorName"
            placement="top-start"
            :disabled="scope.row.isOverFlow"
          >
            <p class="dt-content-project-list-project" ref="thirdTextContainer">{{ scope.row.majorName }}</p>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="taskName" label="任务名称" min-width="322"> </el-table-column>
      <el-table-column prop="taskStateName" label="任务状态" min-width="90"> </el-table-column>
      <el-table-column prop="taskTypeName" label="任务类型" min-width="90"> </el-table-column>
      <el-table-column prop="createName" label="创建人" min-width="80"> </el-table-column>
      <el-table-column prop="masterName" label="负责人" min-width="80"> </el-table-column>
      <el-table-column prop="output" label="产值" min-width="110">
        <template slot-scope="scope">
          <span>{{ scope.row.output }}元</span>
        </template>
      </el-table-column>
      <el-table-column prop="progress" label="进度" min-width="80">
        <template slot-scope="scope">
          <p v-if="scope.row.progress">{{ scope.row.progress }}%</p>
          <p v-else>--</p>
        </template>
      </el-table-column>
      <el-table-column prop="startTime" label="计划工期" min-width="200">
        <template slot-scope="scope">
          <p>
            {{ scope.row.startTime == null || typeof scope.row.startTime !== 'string' ? '--' : scope.row.startTime.substring(0, 10) }}至{{
              scope.row.endTime == null || typeof scope.row.endTime !== 'string' ? '--' : scope.row.endTime.substring(0, 10)
            }}
          </p>
        </template>
      </el-table-column>
      <el-table-column prop="planDays" label="计划天数" min-width="120"> </el-table-column>
      <el-table-column prop="completeTime" label="完成时间" min-width="120">
        <template slot-scope="scope">
          <p>
            {{ scope.row.completeTime == null || typeof scope.row.completeTime !== 'string' ? '--' : scope.row.completeTime.substring(0, 10) }}
          </p>
        </template>
      </el-table-column>
      <el-table-column prop="consumeDays" label="工期消耗(天)" min-width="110"> </el-table-column>
      <el-table-column prop="completeState" label="完成情况" min-width="120">
        <template slot-scope="scope">
          <p v-if="scope.row.completeState < 0">延期{{ Math.abs(scope.row.completeState) }}天</p>
          <p v-else-if="scope.row.completeState > 0 && scope.row.completeTime">提前{{ scope.row.completeState }}天完成</p>
          <p v-else></p>
        </template>
      </el-table-column>
    </el-table>
    <div class="dt-content-project-list-page" v-if="taskList0.total_record > 0">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-size="20"
        layout="prev, pager, next, jumper"
        :total="taskList0.total_record"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    taskList0: Object // 指定prop为Object类型
  },
  data() {
    return {
      page: 1
    }
  },
  methods: {
    headerRowStyle() {
      return {
        'font-size': '14px', // 设置表头字体大小
        'background-color': '#fafafa', // 设置表头背景色
        'font-weight': 'bold', // 设置表头字体加粗
        color: '#909399' // 设置表头字体颜色
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.completeState < 0) {
        return 'postpone-row'
      } else if (row.completeState > 0 && row.completeTime) {
        return 'advance-row'
      }
      return ''
    },
    handleCurrentChange(page) {
      this.$emit('TurnPage', page)
    },
    showTaskCard(row, column, event) {
      this.$root.$emit('openTaskCard', { mode: 'view', rootProjectId: row.rootProjectId, rootProjectName: row.projectName, taskId: row.id })
    },
    setPage(page) {
      this.page = page
    }
  },

  mounted() {}
}
</script>
<style scoped>
.dt-content-project-list {
  /* margin: 16px; */
  margin-top: 16px;
  padding: 14px 14px 0 14px;
  background-color: #fff;
  height: 100%;
  box-sizing: border-box;
}
.dt-content-project-list-project {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dt-content-project-list-page {
  display: flex;
  justify-content: center;
  padding: 20px 0 20px 0;
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
}
.dt-content-project-list >>> .el-table__cell {
  padding: 8px 0;
  color: #1f1f1f;
}
/* .dt-content-project-list-header {
    background-color: #fafafa;
    font-size: 14px;
    font-weight: bold;
    color: #909399;
  } */
</style>
